{% extends "layouts/base.html" %}
{% load static %}
{% block title %} 批量添加人员工时 {% endblock %}

<!-- Specific CSS goes HERE -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <!-- [ Main Content ] start -->
    <section class = "pcoded-main-container">
        <div class = "pcoded-content">
            <!-- [ breadcrumb ] start -->
            <div class = "page-header">
                <div class = "page-block">
                    <div class = "row align-items-center">
                        <div class = "col-md-12">
                            <div class = "page-header-title">
                                <h5 class = "m-b-10">批量添加人员工时</h5>
                            </div>
                            <ul class = "breadcrumb">
                                <li class = "breadcrumb-item"><a href = "{% url 'index' %}"><i
                                        class = "feather icon-home"></i></a></li>
                                <li class = "breadcrumb-item"><a href = "#!">基础数据</a></li>
                                <li class = "breadcrumb-item"><a href = "#!">人员工时</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- [ breadcrumb ] end -->
            <!-- [ Main Content ] start -->
            <div class = "row">
                <div class = "col-xl-12">
                    <div class = "card">
                        <div class = "card-header">
                            <div class = "text-center">
                                <h3><span class = "badge badge-secondary">选择需要添加工时的人员</span></h3>
                            </div>
                        </div>
                        <!-- [ 卡片-body 开始 ] -->
                        <div class = "card-body">
                            <div class = "row">
                                <div class = "col-md-3"></div>
                                <div class = "col-md-6">
                                    <!-- [ 表单 开始 ] -->
                                    <form action = "{% url 'batch_update_employee_hours' %}" method = "post">
                                        {% csrf_token %}
                                        <!-- [ 人员选择表格 开始 ] -->
                                        <!--<table class="table table-bordered table-hover table-sm text-center"
                                               id="name-table">
                                            <caption>【{{ pName }}】共有&nbsp;&nbsp;{{ name_count }}&nbsp;&nbsp;名员工
                                            </caption>
                                            <thead>
                                                <tr class="success">
                                                    <th><input type="checkbox" id="checkAll" name="checkAll"/>
                                                    </th>
                                                    <th>序号</th>
                                                    <th>员工姓名</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for name in all_name_list %}
                                                    <tr>
                                                        <td><input type="checkbox" id="checkAll"
                                                                   name="check{{ forloop.counter }}"/></td>
                                                        <td>{{ forloop.counter }}</td>
                                                        <td>{{ name }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>
                                        </table>-->
                                        <!-- [ 人员选择表格 结束 ] -->

                                        <!-- [ 测试Bootstrap table 开始 ] -->

                                        <table class = "table table-bordered table-hover table-sm text-center"
                                               id = "name-table">
                                            <thead>
                                                <tr>
                                                    <td>ID</td>
                                                    <td>姓名</td>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {% for name in all_name_list %}
                                                    <tr>
                                                        <td name = "Sid">{{ forloop.counter }}</td>
                                                        <td name = "Sname">{{ name }}</td>
                                                    </tr>
                                                {% endfor %}
                                            </tbody>


                                        </table>


                                        <!-- [ 测试Bootstrap table 结束 ] -->

                                        <div class = "input-group mb-3" style = "display: none">
                                            <!--style="display: none" 隐藏后释放占用的页面空间-->
                                            <div class = "input-group-prepend">
                                            <span class = "input-group-text"
                                                  id = "inputGroup-sizing-default">姓名</span>
                                            </div>
                                            <input type = "text" class = "form-control" aria-label = "Default"
                                                   aria-describedby = "inputGroup-sizing-default" name = "e_name"
                                                   id = "e_name">
                                        </div>
                                        <div class = "input-group mb-3" style = "display: none">
                                            <!--style="display: none" 隐藏后释放占用的页面空间-->
                                            <div class = "input-group-prepend">
                                            <span class = "input-group-text"
                                                  id = "inputGroup-sizing-default">工序</span>
                                            </div>
                                            <input type = "text" class = "form-control" aria-label = "Default"
                                                   aria-describedby = "inputGroup-sizing-default" name = "e_process"
                                                   id = "e_process" value="{{ pName }}">
                                        </div>
                                        <div class = "input-group mb-3">
                                            <div class = "input-group-prepend">
                                            <span class = "input-group-text"
                                                  id = "inputGroup-sizing-default">工时</span>
                                            </div>
                                            <input type = "float" class = "form-control" aria-label = "Default"
                                                   aria-describedby = "inputGroup-sizing-default" value = "8.0"
                                                   name = "ehours" id = "ehours">
                                        </div>
                                        <div class = "input-group mb-3">
                                            <div class = "input-group-prepend">
                                                <span class = "input-group-text"
                                                      id = "inputGroup-sizing-date">日期</span>
                                            </div>
                                            <input type = "date" class = "form-control" aria-label = "Default"
                                                   aria-describedby = "inputGroup-sizing-date" id = "workday"
                                                   name = "workday">
                                        </div>
                                        <div class = "form-group mx-sm-3 mb-2 text-center">
                                            <button type = "submit" class = "btn btn-primary mb-2"
                                                    onclick = "sub_click()">确定
                                            </button>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                            <button type = "button" class = "btn btn-primary mb-2"
                                                    onclick = "btn_ret()">取消
                                            </button>
                                        </div>
                                    </form>
                                    <!-- [ 表单 结束 ] -->
                                </div>
                                <div class = "col-md-3"></div>
                            </div>
                        </div>
                        <!-- [ 卡片-body 结束 ] -->
                    </div>
                </div>
            </div>
            <!-- [ Main Content ] end -->
        </div>
    </section>
    <!-- [ Main Content ] end -->

{% endblock content %}

<script src = "{% static 'laydate/laydate.js' %}"></script>
<!-- Specific Page JS goes HERE  -->
{% block javascripts %}
    <script>
        // Example starter JavaScript for disabling form submissions if there are invalid fields
        (function () {
            'use strict';
            window.addEventListener('load', function () {
                // Fetch all the forms we want to apply custom Bootstrap validation styles to
                var forms = document.getElementsByClassName('needs-validation');
                // Loop over them and prevent submission
                var validation = Array.prototype.filter.call(forms, function (form) {
                    form.addEventListener('submit', function (event) {
                        if (form.checkValidity() === false) {
                            event.preventDefault();
                            event.stopPropagation();
                        }
                        form.classList.add('was-validated');
                    }, false);
                });
            }, false);
        })();

        //点击后返回员工列表页
        function btn_ret() {
            window.location.replace("{% url 'employee_hours' 1 %}")
        }

        //给input--date 设置默认值为当天
        var time = new Date();
        var day = ("0" + time.getDate()).slice(-2);
        var month = ("0" + (time.getMonth() + 1)).slice(-2);
        var today = time.getFullYear() + "-" + (month) + "-" + (day);
        $('#workday').val(today);

        //Bootstrap之表格checkbox复选框全选
        $(function () {
            function initTableCheckbox() {
                var $thr = $('table thead tr');
                var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
                /*将全选/反选复选框添加到表头最前，即增加一列*/
                $thr.prepend($checkAllTh);
                /*“全选/反选”复选框*/
                var $checkAll = $thr.find('input');
                $checkAll.click(function (event) {
                    /*将所有行的选中状态设成全选框的选中状态*/
                    $tbr.find('input').prop('checked', $(this).prop('checked'));
                    /*并调整所有选中行的CSS样式*/
                    if ($(this).prop('checked')) {
                        $tbr.find('input').parent().parent().addClass('warning');
                    } else {
                        $tbr.find('input').parent().parent().removeClass('warning');
                    }
                    /*阻止向上冒泡，以防再次触发点击操作*/
                    event.stopPropagation();
                });
                /*点击全选框所在单元格时也触发全选框的点击操作*/
                $checkAllTh.click(function () {
                    $(this).find('input').click();
                });
                var $tbr = $('table tbody tr');
                var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
                /*每一行都在最前面插入一个选中复选框的单元格*/
                $tbr.prepend($checkItemTd);
                /*点击每一行的选中复选框时*/
                $tbr.find('input').click(function (event) {
                    /*调整选中行的CSS样式*/
                    $(this).parent().parent().toggleClass('warning');
                    /*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
                    $checkAll.prop('checked', $tbr.find('input:checked').length == $tbr.length ? true : false);
                    /*阻止向上冒泡，以防再次触发点击操作*/
                    event.stopPropagation();
                });
                /*点击每一行时也触发该行的选中操作*/
                $tbr.click(function () {
                    $(this).find('input').click();
                });
            }

            initTableCheckbox();
        });

        //获取checkbox选中的姓名列的值并写入姓名input框
        function sub_click() {
            var cars = new Array();
            var Tabobj = $("#name-table");
            var Check = $("table input[type=checkbox]:checked");//在table中找input下类型为checkbox属性为选中状态的数据
            Check.each(function () {//遍历
                var row = $(this).parent("td").parent("tr");//获取选中行
                var id = row.find("[name='Sid']").html();//获取name='Sid'的值
                var sname = row.find("[name='Sname']").html();
                console.log(sname)
                cars.push(sname)
            });
            $("#e_name").val(cars)
        }

    </script>

{% endblock javascripts %}
